<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <meta name="author" content="">

        <title>Dashboard Template for Bootstrap</title>
        <!-- Bootstrap core CSS -->
        <link href="asserts/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}"
              rel="stylesheet">

        <!-- Custom styles for this template -->
        <link href="asserts/css/dashboard.css" th:href="@{/asserts/css/dashboard.css}" rel="stylesheet">
        <style type="text/css">
            /* Chart.js */

            @-webkit-keyframes chartjs-render-animation {
                from {
                    opacity: 0.99
                }
                to {
                    opacity: 1
                }
            }

            @keyframes chartjs-render-animation {
                from {
                    opacity: 0.99
                }
                to {
                    opacity: 1
                }
            }

            .chartjs-render-monitor {
                -webkit-animation: chartjs-render-animation 0.001s;
                animation: chartjs-render-animation 0.001s;
            }
        </style>
    </head>

    <body>
        <!--引入抽取的topbar-->
        <!--模板名：会使用thymeleaf的前后缀配置规则进行解析-->
        <div th:replace="commons/bar::topbar"></div>

        <div class="container-fluid">
            <div class="row">
                <!--引入侧边栏-->
                <div th:replace="commons/bar::#sidebar(activeUri='emps')"></div>

                <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
                    <!--需要区分是员工修改还是添加；修改的话有查询出来的emp对象,而添加没有,利用${emp!=null}判断是否为空,不为才去显示里面数据-->

                    <form th:action="@{/emp}" method="post">

                        <!--发送put请求去修改员工数据
                        1.springMVC中,要配置HiddenHttpMethodFilter Springboot1.0自动配置WebMvcAutoConfiguration,
                        Springboot2.0需要直接在配置文件中 spring.mvc.hiddenmethod.filter.enabled=true
                        2.创建post表单
                        3.name="_method" value="" 就是我们指定的请求方式
                        -->


                        <input type="hidden" name="_method" value="put" th:if="${emp!=null}"/>
                        <!--由于更新提交数据时,没有id就不知道修改谁,所以隐藏域中带id过去-->
                        <input type="hidden" name="id" th:if="${emp!=null}" th:value="${emp.id}"/>
                        <div class="form-group">
                            <label for="inputAddress">LastName</label>
                            <input type="text" class="form-control" id="inputAddress" name="lastName"
                                   placeholder="LastName" th:value="${emp!=null}?${emp.lastName}">
                        </div>

                        <div class="form-group">
                            <label for="exampleFormControlInput1">Email</label>
                            <input type="email" class="form-control" id="exampleFormControlInput1" name="email"
                                   placeholder="email" th:value="${emp!=null}?${emp.email}">
                        </div>

                        <label>Gender</label>
                        <br/>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="gender" id="inlineRadio1"
                                   value="1" th:checked="${emp!=null}?${emp.gender==1}">
                            <label class="form-check-label" for="inlineRadio1">男</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="gender" id="inlineRadio2"
                                   value="0" th:checked="${emp!=null}?${emp.gender==0}">
                            <label class="form-check-label" for="inlineRadio2">女</label>
                        </div>
                        <br/>

                        <br>

                        <div class="form-group">
                            <label>Deparment</label>
                            <select class="form-control" name="department.id">
                                <!--提交的是部门id-->
                                <!--th:selected 获取查询出来的id然后,是那个被选中-->
                                <option th:selected="${emp!=null}?${dept.id==emp.department.id}" th:value="${dept.id}"
                                        th:each="dept:${depts}"
                                        th:text="${dept.departmentName}"></option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="inputAddress">Birth</label>
                            <input type="text" name="birth" class="form-control" id="inputBirth"
                                   th:value="${emp!=null}?${#dates.format(emp.birth,'yyyy-MM-dd HH:mm')}"
                                   placeholder="Birth">
                        </div>

                        <div>
                            <button type="submit" class="btn btn-default" th:value="${emp!=null}?'修改':'添加'">提交</button>
                        </div>

                    </form>
                </main>
            </div>
        </div>

        <!-- Bootstrap core JavaScript
    ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js"
                th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script>
        <script type="text/javascript" src="asserts/js/popper.min.js"
                th:src="@{/webjars/popper.js/1.11.1/dist/popper.js}"></script>
        <script type="text/javascript" src="asserts/js/bootstrap.min.js"
                th:src="@{/webjars/bootstrap/4.0.0/js/bootstrap.js}"></script>

        <!-- Icons -->
        <script type="text/javascript" src="asserts/js/feather.min.js" th:src="@{/asserts/js/feather.min.js}"></script>
        <script>
            feather.replace()
        </script>

    </body>

</html>